<ui:composition 
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:q="http://huliqing.name/qfaces"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/template/layout_blog.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="subTabName">
        <c:set var="subTabName" value="articleList" />
        <c:set var="articleListWe" value="" />
    </ui:define>

    <ui:define name="menuTitle" />

    <ui:define name="menuContent">
        <q:saveState value="#{articleListWe.pageId}" />
        <style type="text/css">
            .colA{width:80px;}
            .title{text-align: left;}
            .tags{width:100px;}
            .sec{width:60px;}
            .rep{width:60px;}
            .not{width:60px;}
            .countZ{width:60px;}
            .timeZ{width:60px;font-size: 11px;color:gray;}
        </style>
        <h:form>
            <q:scroller for="articles" 
                        listener="#{articleListWe.loadData}"
                        var="article"
                        displayJump="false" face="1"
                        pageSize="10"
                        sortFields="">
                <h:dataTable id="articles"
                             binding="#{articleListWe.uiArticles}"
                             headerClass="header"
                             width="100%"
                             border="0"
                             styleClass="alignC dotted"
                             rowClasses="row1,row2"
                             columnClasses="oper,title,tags,sec,rep,not,countZ,timeZ,timeZ"
                             cellpadding="3">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="操作" />
                        </f:facet>
                        <h:panelGrid columns="2">
                            <h:outputLink value="/admin/blog/articleEdit.faces" styleClass="marginLR">
                                <f:param name="articleId" value="#{article.articleId}" />
                                <f:param name="returnURL" value="#{app.currentURL}" />
                                <h:graphicImage url="/_res/image/button-edit.gif" />
                            </h:outputLink>
                            <h:commandLink actionListener="#{articleListWe.delete}" onclick="return confirm('#{text['p.toDelete']}');" styleClass="marginLR">
                                <h:graphicImage url="/_res/image/button-delete.gif" />
                            </h:commandLink>
                        </h:panelGrid>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Title" />
                        </f:facet>
                        <h:outputLink value="/article/articleId=#{article.articleId},pageId=#{articleListWe.pageId}" >
                            <h:outputText value="#{article.title}" />
                        </h:outputLink>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="TAG" />
                        </f:facet>
                        <h:outputText value="#{article.tags}" />
                    </h:column>
                        
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Security" />
                        </f:facet>
                        <h:outputText value="#{article.security}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Replyable" />
                        </f:facet>
                        <h:outputText value="#{article.replyable? 'YES' : 'NO'}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Notice" />
                        </f:facet>
                        <h:outputText value="#{article.mailNotice? 'YES' : 'NO'}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="V/R" title="View/Reply"/>
                        </f:facet>
                        <h:outputText value="#{article.totalView}" />
                        /
                        <h:outputText value="#{article.totalReply}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Create" />
                        </f:facet>
                        <h:outputText value="#{article.createDate}" >
                            <f:convertDateTime pattern="#{app.dateTimeFormat}" timeZone="#{app.timeZone}" />
                        </h:outputText>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="Modify" />
                        </f:facet>
                        <h:outputText value="#{article.modifyDate}" >
                            <f:convertDateTime pattern="#{app.dateTimeFormat}" timeZone="#{app.timeZone}" />
                        </h:outputText>
                    </h:column>

                </h:dataTable>
            </q:scroller>
        </h:form>
    </ui:define>
</ui:composition>